<template>
    <div class="expresswaySummaryBox">
        <div class="d-flex w-100">
            <div class="threePartBox mr-6 cursor-pointer" @click="showDetail(tabCode.accident)">
                <div class="flexEndBetween line-height-1">
                    <div class="flexEnd">
                        <img :src="require('../../assets/img/dutyMonitoring/iconPoliceSituation.png')" alt="">
                        <span class="text-size-16  ml-4">警情</span>
                    </div>
                    <div class="flexEnd">
                        <span class="text-size-30 text-fab96d digitalFont line-height-07 mr-6">{{realJQ.policeCaseNum}}</span>
                        <span class="text-size-12">件</span>
                    </div>
                </div>

                <div class="my-6" style="border:1px solid rgba(51,209,243,.3);background-color: #f54f3d">
                    <div style="background-color: #fab96d;height:4px;border-right:1px solid #0b2352"

                         :style="{width:realJQ.todoPoliceCaseNum/realJQ.policeCaseNum*100+'%'}"></div>
                </div>
                <div class="flexCenterCenter line-height-1">
                    <div class="mr-4">未办结</div>
                    <div class="digitalFont text-size-20 line-height-08 text-f54f3d">
                        {{realJQ.todoPoliceCaseNum}}
                    </div>
                </div>
            </div>
            <div class="threePartBox mr-6 cursor-pointer" @click="showDetail(tabCode.construction)">
                <div class="flexEndBetween line-height-1">
                    <div class="flexEnd">
                        <img :src="require('../../assets/img/dutyMonitoring/iconConstruction.png')" alt="">
                        <span class="text-size-16  ml-4">施工</span>
                    </div>
                    <div class="flexEnd">
                        <span class="text-size-30 text-fab96d digitalFont line-height-07 mr-6">{{dataExpresswaySummary.constructionNum}}</span>
                        <span class="text-size-12">起</span>
                    </div>
                </div>
                <div class="my-8" style="border:1px solid rgba(51,209,243,.3);"></div>
                <div class="flexEndBetween line-height-1">
                    <div class="mr-4">涉及里程</div>
                    <div class="flexEnd">
                        <div class="digitalFont text-size-20 line-height-08 text-34f2ef mr-6">
                            {{dataExpresswaySummary.mileage}}
                        </div>
                        <div>km</div>
                    </div>
                </div>
            </div>
            <div class="threePartBox cursor-pointer" @click="showDetail(tabCode.bayonet)">
                <div class="text-center line-height-1">收费站</div>
                <div class="flexEnd">
                    <div class="w-50 text-center">
                        <img :src="require('../../assets/img/dutyMonitoring/markOpen.png')" alt="">
                        <div class="text-size-30 text-04f186 digitalFont line-height-07 mt-4">
                            {{dataExpresswaySummary.openGatesNum}}
                        </div>

                    </div>
                    <div class="w-50 text-center">
                        <img :src="require('../../assets/img/dutyMonitoring/markRedClose.png')" alt="">
                        <div class="text-size-30 text-f5303e digitalFont line-height-07 mt-4">
                            {{dataExpresswaySummary.offGatesNum}}
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="mt-10">
            <div class="d-inline-block border-bottom-light-theme mb-8">
                交通流量
            </div>
            <div id="expresswaySummaryChartBox" style="height: 135px;width: 100%"></div>

        </div>

    </div>
</template>

<script>
    import {getExpresswaySummary, getExpresswayTrafficFlow, getRealJQ} from "../../common/api";
    import {echartsLineOptionFactory} from "../../common/echart-config/echart-config";
    import echarts from 'echarts'
    import * as moment from 'moment'
    import {clearIntervalArray, getLastCurrentTime} from "../../utils/js-utils";
    import {tabCode} from "../../common/data/sys-data";


    export default {
        name: "expresswaySummary",
        data() {
            return {
                realJQ: {policeCaseNum: 0, todoPoliceCaseNum: 0},// 高速运行概括数据
                dataExpresswaySummary: {},// 高速运行概括数据

                echartsExpresswaySummary: null, // 高速运行概括折线图

                intervalArray: [],

                tabCode:tabCode,


            }
        }, methods: {
            showDetail(flag) {
                this.$emit('showDetail',flag)
            },
            getExpresswaySummary() {// 高速运行概括
                var reqBody = {
                    // TODO 发版修改
                    // currentTime:'2020-11-26'
                    currentTime: moment().format("YYYY-MM-DD")
                };
                getExpresswaySummary(reqBody).then(res => {
                    if (res.isSuccess) {
                        this.dataExpresswaySummary = res.data;
                    }
                })
            },
            getRealJQ() {// 高速运行概括
                var reqBody = {
                    currentTime: moment().format("YYYY-MM-DD")
                };
                getRealJQ(reqBody).then(res => {
                    if (res.isSuccess) {
                        this.realJQ = res.data;
                    }
                })
            },
            getExpresswayTrafficFlow() { // 高速交通流量
                var reqBody = {
                    currentTime: getLastCurrentTime()
                };
                getExpresswayTrafficFlow(reqBody).then(res => {
                    // console.log(res);
                    // console.log(document.getElementById('expresswaySummaryChartBox'));
                    if (res.isSuccess) {
                        var resData = res.data;
                        this.echartsExpresswaySummary = echarts.init(document.getElementById('expresswaySummaryChartBox'));
                        //"#08fbdd"
                        //"#099ef8"
                        var xAxisData = resData.timeList;
                        var series = [{
                            data: resData.lastWeek,
                            color: "#08fbdd", name: "上周"
                        }, {data: resData.nowWeek, color: "#099ef8", name: "今天"}];
                        this.echartsExpresswaySummary.setOption(echartsLineOptionFactory(xAxisData, series));
                    }
                })
            },
        },
        mounted() {
            this.getExpresswaySummary();
            this.getExpresswayTrafficFlow();
            this.getRealJQ();

            this.intervalArray.push(setInterval(this.getRealJQ,1000*3));
            this.intervalArray.push(setInterval(this.getExpresswaySummary,1000*60*15));
            this.intervalArray.push(setInterval(this.getExpresswayTrafficFlow,1000*60*15));

        }, beforeDestroy() {
            if (this.echartsExpresswaySummary) {
                this.echartsExpresswaySummary.clear();
            }

            clearIntervalArray(this.intervalArray)


        }
    }
</script>

<style scoped>


    .expresswaySummaryBox {
        background-image: url("../../assets/img/dutyMonitoring/bgExpresswaySummary.png");
        height: 345px;
        position: relative;
        padding: 60px 20px 20px 20px;
    }

    .threePartBox {
        background-image: url("../../assets/img/dutyMonitoring/bg3part.png");
        background-repeat: no-repeat;
        width: 164px;
        height: 86px;
        padding: 19px 14px 10px 12px;
    }
</style>
